<template>
  <!-- <div style="margin-top:100px;">
    <button @click="shareToQQ()">分享到QQ</button>
    <button @click="shareToRoom()">分享到QQ空间</button>
    <button @click="shareToMicroblog()">分享到微博</button>
  </div> -->
  <div class="body">
    <div class="dome">
      <ul>
        <li
          v-for="(l,index) in devs"
          :key="index"
          :class="{active:num==index}"
          @click="num=index"
        >{{l}}</li>
      </ul>
    </div>
    <div class="Box">
      <div
        v-for="(d,index) in devsd"
        :key="index"
        class="balabce"
        v-show="num==index"
      >{{d}}</div>
    </div>
  </div>
</template>
<script>
import bridge from '../../js/js1'
import { getSystem, openApp, getUrlQuery, parseKeyValue } from '../../js/js'
export default {
  name: "Tab",
  data () {
    return {
      num: 0,
      devs: ['周年庆', 'OEM抽奖', '我的'],
      devsd: ['首页活动', '搜索全部', '关于我的'],
      show: false,
      showe: false,
      system: getSystem(),
    }
  },
  created () {
  },
  methods: {
  }
};
</script>
 
<style scoped lang="less">
body {
  overflow: hidden;
  min-width: 320px;
  max-width: 750px;
  width: 10rem;
  // height: 91.28rem;
  background: #ffbcd9;
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica;
  .dome {
    width: 10rem;
    height: 1.533333rem;
    text-align: center;
    ul {
      .active {
        background: cyan;
      }
      li {
        margin-left: 0.16rem;
        font-size: 0.426667rem;
        float: left;
        line-height: 1.066667rem;
        height: 1.066667rem;
        width: 3rem;
        text-align: center;
        background: #33646a;
      }
    }
  }
  .Box {
    width: 10rem;
    .balabce {
      width: 9.6rem;
      height: 4rem;
      background: #f5f6f7;
      margin: 0 auto;
    }
  }
}
</style>